<template>
	<view>
		<cu-custom :isBack="true">
			<block slot="backText"></block>
			<block slot="content">{{corpCode}}-国内仓拣货退回</block>
		</cu-custom>
		<view class="cu-bar bg-white search fixed" :style="[{top:CustomBar + 'px'}]">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<!-- <input @confirm="sub" v-model="asnId" :focus="true" ></input> -->
				<input @confirm="sub" v-model="soDjno" type="text" placeholder="输入搜索的关键词" focus></input>
			</view>
			<!-- <view class="action">
				<button class="cu-btn bg-gradual-green shadow-blur round" @click="toBox">搜索</button>
			</view> -->
			<view class="action" @click="toScan">
				<text class="cuIcon-scan" style="font-size: 56rpx;"></text>
			</view>
		</view>
		
		
		<scroll-view scroll-y="true" class="indexes"  :scroll-with-animation="true"
		 :enable-back-to-top="true" :style="[{height:'calc(100vh - '+ CustomBar + 'px - 50px)'}]">
			<view class="padding" style="font-weight: 1000; font-size: 16px;">{{soH}}  共 <b style="color: #0081FF;font-size: 18px;"> {{iqtyNum}} </b> 条
			</view>
			<block v-for="(item,index) in soData" :key="index">
				<view :id="'index_'+soData[index].cinvcode">
						<view class="padding" style="font-weight: 700; font-size: 16px; margin-bottom: 20px;">{{item.chinaC.invCode || ''}} — {{item.chinaC.invName || ''}}
							<!-- <view style="float: right;" ><button class="cu-btn bg-gradual-green shadow-blur round shadow margin-left" @tap="showModal" data-target="DrawerModalR">推荐货位</button>
							</view> -->
						</view>
						<form>
							<view class="scroll-view-item">
								<view class="cu-form-group">
									<view class="title">订单编号：</view>
									<input :value="item.djno" placeholder=" " name="input" disabled="false"></input>
								</view>
								<view class="cu-form-group ">
									<view class="title" >拣货数量：</view>
									<input :value="item.chinaC.iqty" placeholder=" " name="input" disabled="false" ></input>
								</view>
								<view class="cu-form-group ">
									<view class="title" >已拣量：</view>
									<input :value="item.chinaC.sumQty" placeholder=" " name="input" disabled="false" ></input>
								</view>
								<view class="cu-form-group" v-for="(items,indexs) in soData[index].posList" :key="indexs">
									<view class="title">货位名称：</view>
									<input v-model="items.posName" placeholder="B-11" name="input" disabled="false"></input>
									<view class="title">退回数量：</view>
									<input v-model ="items.iqty"  placeholder="0" name="input" type="number"></input>
								</view>
							</view>
						</form>
				</view>
			</block>
			<button type="primary" class="no-border confirm-btn" :disabled="isReC" style="margin-top: 40px;"  @click="createSo">退回</button>
			<!-- </view> -->
		</scroll-view>
		<view class="action-section" style="left: 3%;">
			<view  v-if="iqtyNum > 0">
				<button type="primary" class=""  @click="upBefor">上一页</button>
			</view>
		</view>
		<view class="action-section">
			<view  v-if="iqtyNum > 0">
				<button type="primary" class=""  @click="upAfter">下一页</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				isReC:false,
				CustomBar: this.CustomBar, //滚动定位用
				modalName: null,
				soDjno2:'', 
				soDjno:'',  //存储拣货单号
				soData:[], //查询出来的值
				soH: '', //客户名称
				soC: [{    //回写数据格式
					djno:'',
					ccuscode:'',
					pid:'',
					pdid:'',
					viewCode:'',
					cinvcode:'',
					cinvname:'',
					pickqty:'',
					iqty:'',
					soHw :[],
					}],
				soMain:[{ //封装数据
					djno:'',
					ccuscode:'',
					pid:'',
					pdid:'',
					cinvcode:'',
					pickqty:'',
					iqty:'',
					hw:'',
					bpdid:'',
				}],
				list:[],
				iqtyNum :'0',
				indexList:0,
			}
		},
		onLoad() {
			// this.soDjno = 'jh_102_GG2104020003';
			// this.sub(); 
		},
		computed: {
			...mapState(['hasLogin', 'userInfo', 'auditlist', 'corpCode']),
		},
		methods: {
			/** 扫发出声音*/
			makeSound(name){
				console.log("=====testClick=====");
				let src = '../../static/'+name+'.mp3';
				//实例化声音  
				const Audio = uni.createInnerAudioContext();
				Audio.autoplay = true;
				Audio.src = src; //音频地址  
				Audio.play(); //执行播放  
				Audio.onError((res) => {
				});
				Audio.onPause(function() {
					console.log('end');
					Audio.destroy();
				});
			},
			getHw(id){
				uni.request({
					url:this.serverURL_a+'/so/App/getHw',
					data:{
						hw : id,
						__sid:this.userInfo.sessionid
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded;charset=utf-8',
					},
					method: 'POST',
					success:function(data){
						this.soDjno = '';
						var requrt = data.data;
						this.soData[0].posList = [];
						//console.log(1)
						if(requrt.code == '1001'){
							var hwdata = requrt.resMap;
							var hw = {
								posCode:hwdata.cposcode,
								posName:hwdata.cposname,
								iqty:0,
							};
							this.soData[0].posList.push(hw);
						}else{
							this.$api.msg(requrt.message);
							return;
						}
					}.bind(this),
					fail:function(){
						this.$api.msg('服务已停止,请稍后再试');
						return;
					}.bind(this),
				});
			},
			sub(){
				if(this.soDjno.indexOf("hw")>-1){
					this.getHw(this.soDjno);
					return;
				}else if(this.soDjno.indexOf("jh")==-1){
					this.$api.msg('请输入正确的拣货单号!');
					return;
				}
				this.loadData();
			},
			cleanAll(){
				this.soData = [];
				this.soDjno='';
				this.soH='';
				this.soC = [{
					chinaC:{},
					posList :[],
					}];
				this.soMain=[{
					djno:'',
					ccuscode:'',
					pid:'',
					pdid:'',
					cinvcode:'',
					pickqty:'',
					iqty:'',
					hw:'',
					bpdid:'',
				}];
			},
			toScan(){
				uni.scanCode({
					onlyFromCamera: true,
					success: function(res) {
						this.soDjno = res.result;
						console.log(this.soDjno)
						this.sub();
					}.bind(this)
				});
			},
			loadData(){
				uni.request({
					url:this.serverURL_a+'/so/App/findXjLogsCN',
					data:{
						djno : this.soDjno,
						__sid:this.userInfo.sessionid
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded;charset=utf-8',
					},
					method: 'POST',
					success:function(data){
						this.soDjno2 = this.soDjno
						this.cleanAll();
						var requrt = data.data;
						console.log(requrt,'requrt===');
						if(requrt.result == "true"){/*  */
							this.soHead = requrt.data
							var list = requrt.data.xjLogList;
							this.list = list;
							this.insertListHc(list,0);
						}else{
							this.$api.msg(requrt.message);
							return;
						}
					}.bind(this),
					fail:function(){
						this.$api.msg('服务已停止,请稍后再试');
						return;
					}.bind(this),
				});
			},
			upBefor(){
				if(this.indexList != 0){
					this.insertListHc(this.list,this.indexList-1);
				}else{
					this.$api.msg('已到首页!');
					return;
				}
			},
			upAfter(){
				if(this.indexList != this.list.length-1){
					this.insertListHc(this.list,this.indexList+1);
				}else{
					this.$api.msg('已到最后一页!');
					return;
				}
			},
			//分装件货清单数据
			
			insertListHc(list,index){
				// var ses = lists.sEs
				this.indexList = index;
				this.iqtyNum = list.length;
				for(let i=index;i<list.length;i++){
					// this.soC[0].soHw = [];
					// this.soC[0].djno = this.soHead.djno;
					// this.soC[0].ccuscode = list[i].companyCode;
					// this.soC[0].viewCode = list[i].viewCode;
					// this.soC[0].pid = list[i].hid.id;
					// this.soC[0].pdid = list[i].id;
					// this.soC[0].cinvcode = list[i].cinvcode;
					// this.soC[0].cinvname = list[i].cinvname;
					// this.soC[0].pickqty = list[i].qty;
					// this.soC[0].iqty = list[i].itotalQty;
					// this.soC[0].bpdid = list[i].autoid;
					// this.soH = list[i].companyName;
					// for(var j=0;j<ses.length;j++){
					// 	if(list[i].cinvcode == ses[j].cinvcode && list[i].id == ses[j].pdid){
					// 		this.getHw('hw_'+ses[j].hw);
					// 		break;
					// 	}
					// }
					this.soC[0]= list[i];
					this.soC[0].djno = this.soHead.djno
					this.soH = list[i].companyName;
					break;
				}
				this.soData = this.soC;
				this.$forceUpdate();
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			createSo(){
				this.isReC = true
				if(this.iqtyNum == 0){
					this.$api.msg('暂无数据,不能提交！');
					this.isReC = false;
					this.makeSound("sb");
					return;
				}
				// if(this.isReC){
				// 	this.$api.msg('请不要重复提交！');
				// 	this.makeSound("sb");
				// 	return;
				// }
				
				var qhiqty = 0;
				let arr = this.soData.map(item=>{
					let obj = {
						djno:item.djno,
						childId:item.chinaC.id,
						csource:'1',
						posList:item.posList.map(e=>{
							qhiqty = parseFloat(qhiqty) + parseFloat(e.iqty)
							return {
								posCode:e.posCode,
								iqty:e.iqty,
							}
						})
					}
					return obj
				})
				let param = arr[0]
				
				if(!this.soData[0].posList.length){
					this.$api.msg('请选择回退货位！');
					this.isReC = false;
					this.makeSound("sb");
					return;
				}
				if(qhiqty > this.soData[0].chinaC.sumQty){
					uni.showModal({
					    content: '退回数量不能大于已拣货数量！',
						showCancel:false,
					});
					this.isReC = false;
					this.makeSound("sb");
					return;
				}
				
				
				// this.soC = this.soData;
				// for(var i=0;i<this.soC.length;i++){
				// 	this.soMain[i].djno = this.soC[i].djno;
				// 	this.soMain[i].ccuscode = this.soC[i].ccuscode;
				// 	this.soMain[i].pid = this.soC[i].pid;
				// 	this.soMain[i].pdid = this.soC[i].pdid;
				// 	this.soMain[i].cinvcode = this.soC[i].cinvcode;
				// 	if(this.soData[i].soHw.length < 1){
				// 		this.$api.msg('请选择回退货位！');
				// 		this.makeSound("sb");
				// 		return;
				// 	}
				// 	this.soMain[i].hw = JSON.stringify(this.soData[i].soHw);
				// 	this.soMain[i].pickqty = this.soC[i].pickqty;
				// 	this.soMain[i].iqty = this.soC[i].pickqty;
				// 	this.soMain[i].bpdid = this.soC[i].bpdid;
				// 	var qhiqty = 0;
				// 	for(var j=0;j<this.soC[i].soHw.length;j++){
				// 		qhiqty = parseFloat(qhiqty) + parseFloat(this.soC[i].soHw[j].xjiqty);
				// 	}
				// 	if(qhiqty > this.soC[i].iqty){
				// 		this.$api.msg('退回数量不能大于已拣货数量！');
				// 		this.makeSound("sb");
				// 		return;
				// 	}
				// }
				// let delh = this.soMain;
				// let red = JSON.stringify(delh);
				uni.showModal({
					content: "是否提交!",
					success: function(res) {
						var _this = this;
						if (res.confirm) {
							uni.showLoading({
							    title: '数据提交中',
								 mask:true
							});
							uni.request({
								url:this.serverURL_a + '/so/App/subXjCN?__sid=' + this.userInfo.sessionid,
								data:param,
								header: {
									'content-type': 'application/json',
								},
								method: 'POST',
								success:function(data){
									uni.hideLoading();
									let ret = data.data;
									this.isReC = false;
									if(data.statusCode!="200"){
										uni.showModal({
										    content: ret.message,
											showCancel:false,
										});
										this.makeSound("sb");
										return;
									}
									if(ret.result=="true"){
										// this.cleanAll();
										this.$api.msg("回退成功！");
										this.makeSound("cg");
										// this.list.soPickVoucher.soPickVouchersList.splice(this.indexList, 1);
										// if(this.list.soPickVoucher.soPickVouchersList.length > 0){
										// 	if(this.indexList == this.list.soPickVoucher.soPickVouchersList.length){
										// 		this.insertListHc(this.list,this.indexList-1);
										// 	}else{
										// 		this.insertListHc(this.list,this.indexList);
										// 	}
										// }else{
										// 	this.iqtyNum = 0;
										// }
										uni.request({
											url:this.serverURL_a+'/so/App/findXjLogsCN',
											data:{
												djno : this.soDjno2,
												__sid:this.userInfo.sessionid
											},
											header: {
												'content-type': 'application/x-www-form-urlencoded;charset=utf-8',
											},
											method: 'POST',
											success:function(data){
												// this.cleanAll();
												var requrt = data.data;
												console.log(requrt,'requrt===');
												if(requrt.result == "true"){/*  */
													this.soHead = requrt.data
													var list = requrt.data.xjLogList;
													this.list = list;
													this.insertListHc(list,this.indexList);
												}else{
													this.$api.msg(requrt.message);
													return;
												}
											}.bind(this),
											fail:function(){
												this.$api.msg('服务已停止,请稍后再试');
												return;
											}.bind(this),
										});
										
										
										return;
									}else{
										uni.showModal({
										    content: ret.message,
											showCancel:false,
										});
										this.makeSound("sb");
										return;
									}
								}.bind(this),
								fail: function() {
									this.$api.msg('无法连接服务，请联系管理');
									this.isReC = false;
									return;
								}.bind(this)
							});
						} else if (res.cancel) {
							this.isReC = false;
							return
						}
					}.bind(this)
				});
			}
		}
	}
</script>

<style>
	page {
		padding-top: 100upx;
	}

	.indexes {
		position: relative;
	}
	
	/* 底部栏 */
	.action-section{
		/* #ifdef H5 */
		/* #endif */
		position:fixed;
		left: 75%;
		bottom:30upx;
		z-index: 95;
		display: flex;
		align-items: center;
		background: rgba(255,255,255,.9);
		border-radius: 40upx;
		.checkbox{
			height:52upx;
			position:relative;
			image{
				width: 52upx;
				height: 100%;
				position:relative;
				z-index: 5;
			}
		}
		.clear-btn{
			position:absolute;
			left: 26upx;
			top: 0;
			z-index: 4;
			width: 0;
			height: 52upx;
			line-height: 52upx;
			padding-left: 38upx;
			font-size: $font-base;
			color: #fff;
			background: $font-color-disabled;
			border-radius:0 50px 50px 0;
			opacity: 0;
			transition: .2s;
			&.show{
				opacity: 1;
				width: 120upx;
			}
		}
		.total-box{
			flex: 1;
			display:flex;
			flex-direction: column;
			text-align:right;
			padding-right: 40upx;
			.price{
				font-size: $font-lg;
				color: $font-color-dark;
			}
			.coupon{
				font-size: $font-sm;
				color: $font-color-light;
				text{
					color: $font-color-dark;
				}
			}
		}
		.confirm-btn{
			padding: 0 38upx;
			margin: 0;
			border-radius: 100px;
			height: 76upx;
			line-height: 76upx;
			font-size: $font-base + 2upx;
			background: $uni-color-primary;
		}
	}

	.indexBar {
		position: fixed;
		right: 0px;
		bottom: 0px;
		padding: 20upx 20upx 20upx 60upx;
		display: flex;
		align-items: center;
	}

	.indexBar .indexBar-box {
		width: 40upx;
		height: auto;
		background: #fff;
		display: flex;
		flex-direction: column;
		box-shadow: 0 0 20upx rgba(0, 0, 0, 0.1);
		border-radius: 10upx;
	}

	.indexBar-item {
		flex: 1;
		width: 40upx;
		height: 40upx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24upx;
		color: #888;
	}

	movable-view.indexBar-item {
		width: 40upx;
		height: 40upx;
		z-index: 9;
		position: relative;
	}

	movable-view.indexBar-item::before {
		content: "";
		display: block;
		position: absolute;
		left: 0;
		top: 10upx;
		height: 20upx;
		width: 4upx;
		background-color: #f37b1d;
	}

	.indexToast {
		position: fixed;
		top: 0;
		right: 80upx;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		width: 100upx;
		height: 100upx;
		border-radius: 10upx;
		margin: auto;
		color: #fff;
		line-height: 100upx;
		text-align: center;
		font-size: 48upx;
	}
</style>
